<template>
  <div class="footer">
    <div class="footer-container">
      <div class="footer-left">
        <div class="logo">
          <img src="@/assets/images/logo.svg" class="logo-img" />
          <p class="logo-name">苦甲子</p>
        </div>

        <p class="top-p">
          该留言墙是为了巩固知识，出现的产物，便于用户交流的留言平台
        </p>
        <p class="top-p">
          用户将留言便签贴在留言墙上，用户可以自定义便签颜色和内容属性，不仅可以用于交流，也是一场记录
        </p>

        <p class="state">
          <span>声明</span><span>备案/许可证豫ICP备12345678号</span><span>网站备案/许可证豫ICP备12345678号-1</span>
        </p>
      </div>

      <div class="link">
        <p class="title">链接</p>
        <div class="link-inner">
          <a href="javascript:;" target="_blank" class="link-name">苦甲子</a>
          <a href="javascript:;" target="_blank" class="link-name">博客</a>
        </div>
      </div>

      <div class="footer-right">
        <p class="title">打赏</p>
        <div class="right-inner">
          <div>
            <img src="@/assets/images/weixin.png" />
            <p class="ds-title">微信支付</p>
          </div>
          <div>
            <img src="@/assets/images/zhifubao.jpg" />
            <p class="ds-title">支付宝支付</p>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>


<style lang="less" scoped>
.footer {
  width: 100%;
  height: 200px;
  background-color: @gray-0;
  padding: 20px;
  box-sizing: border-box;

  .footer-container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    p {
      color: rgba(255, 255, 255, 0.5);
    }
  }

  .footer-left {
    .logo {
      display: flex;
      align-items: center;
      margin-bottom: 24px;

      .logo-name {
        font-size: 20px;
        color: @gray-10;
        font-weight: 600px;
        padding-left: 10px;
      }
    }

    .top-p {
      font-size: @font-12;
      padding-bottom: 4px;
      width: 400px;
    }

    .state {
      font-size: @font-12;
      padding-top: 26px;

      span {
        padding-right: 20px;
      }
    }

  }


  .title {
    font-size: @font-16;
    padding-bottom: 12px;
  }

  .link {
    padding: 0 50px;
    flex: 1;

    .link-inner {
      a {
        color: rgba(255, 255, 255, 0.5);
        padding-right: 20px;
      }
    }
  }

  .footer-right {


    .right-inner {
      display: flex;

      img {
        width: 100px;
        height: 100px;
        padding-right: 40px;
      }

      .ds-title {
        font-size: @font-12;
        padding-top: 8px;
      }
    }
  }

}
</style>
